<template>
  <div class="flexible-box" :style="{height:boxHeight,backgroundColor:bgColor}">
    <slot />
  </div>
</template>
<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: '#F5F5F5'
    }
  },
  data() {
    return {
      boxHeight: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calculateHeight()
    })
    window.addEventListener('height', this.calculateHeight)
  },
  beforeDestroy() {
    window.removeEventListener('height', this.calculateHeight)
  },
  methods: {
    calculateHeight() {
      // const windowHeight = window.innerHeight;
      const appElement = document.querySelector('.app-main')
      const appHeight = appElement.clientHeight
      const box = this.$el
      const boxHeight = box.getBoundingClientRect().height
      // console.log(windowHeight,boxHeight,appHeight);
      this.boxHeight = boxHeight > appHeight ? boxHeight + 'px' : appHeight + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
.flexible-box{
    //overflow: hidden;
}
</style>
